﻿<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id='Description'>jqxColorPicker Directive for AngularJS</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            function getTextElementByColor(color) {
                if (color == 'transparent' || color.hex == "") {
                    return $("<div style='text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;'>transparent</div>");
                }

                var element = $("<div style='text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;'>#" + color.hex + "</div>");
                var nThreshold = 105;
                var bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
                var foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
                element.css('color', foreColor);
                element.css('background', "#" + color.hex);
                element.addClass('jqx-rc-all');
                return element;
            }

            $scope.createColorPicker = false;
            $scope.dropDownButtonInstance = {};

            $scope.opening = function (event) {
                $scope.createColorPicker = true;
            }

            $scope.colorChange = function (event) {
                $scope.dropDownButtonInstance.setContent(getTextElementByColor(event.args.color));
            }

            $scope.$on('jqxDropDownButtonCreated', function (event, arguments) {
                $scope.dropDownButtonInstance.setContent(getTextElementByColor(new $.jqx.color({ hex: "ffaabb" })));
            });
        });
    </script>
</head>
<body class='default'>
    <div ng-controller="demoController">
        <jqx-drop-down-button jqx-on-opening="opening(event)" jqx-width="150" jqx-instance="dropDownButtonInstance" jqx-height="22">
          <jqx-color-picker jqx-create="createColorPicker" jqx-on-colorchange="colorChange(event)"  jqx-color="'ffaabb'" jqx-color-mode="'hue'" jqx-width="220" jqx-height="220"></jqx-color-picker>
        </jqx-drop-down-button>
     </div>
</body>
</html>
